{% macro nav_logo() %}
<div class="p-navigation__banner">
  <div class="p-navigation__tagged-logo">
    <a class="p-navigation__link" href="/">
      <div class="p-navigation__logo-tag">
        <img class="p-navigation__logo-icon" src="https://assets.ubuntu.com/v1/b36b0862-Vanilla_icon_RGB_2022.svg" alt="Vanilla framework">
      </div>
      <span class="p-navigation__logo-title">Vanilla</span>
    </a>
  </div>
  <ul class="p-navigation__items">
    <li class="p-navigation__item">
      <button class="js-search-button p-navigation__link--search-toggle">
        <span class="p-navigation__search-label">Search</span>
      </button>
    </li>
    <li class="p-navigation__item">
      <button class="js-menu-button p-navigation__link">Menu</button>
    </li>
  </ul>
</div>
{% endmacro %}

{% macro nav_items() %}
<nav class="p-navigation__nav" aria-label="Main">
  <ul class="p-navigation__items">
    <li class="p-navigation__item {% if (path.startswith('/docs') or path.startswith('/design')) and not path.startswith('/docs/examples') %}is-selected{% endif %}"><a class="p-navigation__link" href="/docs">Docs</a></li>
    <li class="p-navigation__item {% if '/docs/examples' in path %}is-selected{% endif %}"><a class="p-navigation__link" href="/docs/examples">Examples</a></li>
    <li class="p-navigation__item{% if path == '/accessibility' %} is-selected{% endif %}"><a class="p-navigation__link" href="/accessibility">Accessibility</a></li>
    <li class="p-navigation__item{% if path == '/browser-support' %} is-selected{% endif %}"><a class="p-navigation__link" href="/browser-support">Browser support</a></li>
    <li class="p-navigation__item{% if path == '/contribute' %} is-selected{% endif %}"><a class="p-navigation__link" href="/contribute">Contribute</a></li>
  </ul>
  <ul class="p-navigation__items">
    <li class="p-navigation__item">
      <button class="js-search-button p-navigation__link--search-toggle">
        <span class="p-navigation__search-label">Search</span>
      </button>
    </li>
  </ul>
  <div class="p-navigation__search">
    <form class="p-search-box is-light" action="/docs/search">
      <input type="search" id="search-docs" class="p-search-box__input" name="q" {% if query %}value="{{ query }}"{% endif %} placeholder="Search the docs" title="Search the documentation"  autocomplete="on" aria-label="Search the docs" required />
      <button type="reset" id="search-docs-reset" class="p-search-box__reset u-no-margin--right" name="close"><i class="p-icon--close">Clear input</i></button>
      <button type="submit" class="p-search-box__button" name="submit"><i class="p-icon--search">Submit</i></button>
    </form>
  </div>
</nav>
{% endmacro %}

<a href="#main-content" class="p-link--skip">Jump to main content</a>

<header id="navigation" class="p-navigation is-dark">

  {% if is_docs %}
  <div class="l-docs__subgrid">
    <div class="l-docs__sidebar">
      {{ nav_logo() }}
    </div>
    <div class="l-docs__main">
      <div class="p-navigation__row u-fixed-width">
        {{ nav_items() }}
      </div>
    </div>
  </div>
  {% else %}
  <div class="p-navigation__row--25-75">
    {{ nav_logo() }}
    {{ nav_items() }}
  </div>
  {% endif %}
  <div class="p-navigation__search-overlay"></div>
</header>
